<template>
  <div class="page-container">
    <div class="control-container">
      <div class="left-panel shrink-panel" :class="isWide?'':'narrow'">
        <div class="shrink-btn-panel">
          <i :class="isWide?'el-icon-arrow-left':'el-icon-arrow-right'" @click="isWide = !isWide" />
        </div>
        <OutletTree
          v-if="isWide"
          @handleNodeClick="handleNodeClick"
        />
      </div>
      <div class="right-panel overflow-x">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="设备简称：">
              <el-input v-model="query.shortName" />
            </el-form-item>
            <el-button type="primary" @click="handleSelect">查询</el-button>
            <el-button type="primary" @click="handleAdd">添加</el-button>
          </el-form>
        </div>
        <div class="table-panel">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 300px)"
            :data="tableData"
          >
            <el-table-column prop="id" label="id" width="80" />
            <el-table-column prop="outletName" label="排口名称" width="150" />
            <el-table-column prop="shortName" label="设备简称" width="120" />
            <el-table-column prop="equipmentTypeName" label="设备类型" />
            <el-table-column prop="eqmBrand" label="设备品牌" />
            <el-table-column prop="eqmModel" label="设备型号" width="120" />
            <el-table-column prop="equipmentNumber" label="设备编号" width="120" />
            <el-table-column prop="serviceType" label="合同性质">
              <template slot-scope="scope">{{ getDictLabel('e029', scope.row.serviceType) }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="startTime " label="合同开始时间" width="100">
              <template slot-scope="scope">{{ parseTime(scope.row.startTime,'{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime " label="合同结束时间" width="100">
              <template slot-scope="scope">{{ parseTime(scope.row.endTime,'{y}-{m}-{d}') }}
              </template>
            </el-table-column> -->
            <el-table-column prop="inspectionCycle" label="巡检周期（天）" />
            <el-table-column prop="calibrationCycle" label="标定/校准周期（天）" />
            <el-table-column prop="maintenanceCycle" label="维护周期（天）" />
            <el-table-column prop="comparisonPeriod" label="实际水样比对周期（天）" />
            <el-table-column label="操作" width="210" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="primary" size="mini" @click="handleLog(scope.row)">日志</el-button>
                <el-button type="primary" size="mini" @click="handleDel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <Pagination
              v-show="query.total>0"
              :total="query.total"
              :page.sync="query.page"
              :limit.sync="query.limit"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
    </div>
    <AddOutletEquipmentDialog
      :dialog-visible="dialogVisible"
      :dialog-type="dialogType"
      :obj="obj"
      :outlet-id="outletId"
      @closeDialog="closeDialog"
      @flushPage="handleSelect"
    />
    <LogDialog
      :dialog-visible="logDialogVisible"
      :obj="obj"
      @closeDialog="closeDialog"
      @flushPage="handleSelect"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import AddOutletEquipmentDialog from './components/AddOutletEquipmentDialog'
import LogDialog from './components/logDialog'
import { getPage, del } from '@/api/base/outletEquipment'
import { getDictLabel, parseTime } from '@/utils'
import OutletTree from '@/components/Tree/outletTree'
export default {
  name: 'OutletEquipment',
  components: {
    AddOutletEquipmentDialog, Pagination, OutletTree, LogDialog
  },
  data() {
    return {
      isWide: true,
      query: {
        total: 0,
        page: 1,
        limit: 10,
        shortName: '',
        treeId: null,
        treeType: null,
        contractOeId: null,
        ContractOe: {}
      },
      tableData: [],
      tableLoading: false,
      dialogVisible: false,
      logDialogVisible: false,
      dialogType: '',
      obj: {},
      outletId: null
    }
  },
  created() {
    this.handleSelect()
  },
  mounted() {},
  methods: {
    getDictLabel,
    parseTime,
    initData() {
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      getPage(query).then(res => {
        this.tableData = res.data.data.records
        this.query.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 添加
    handleAdd() {
      this.dialogVisible = true
      this.obj = null
      this.dialogType = 'add'
    },
    // 修改
    handleUpdate(row) {
      this.dialogVisible = true
      this.obj = row
      this.dialogType = 'update'
    },
    // 删除
    handleDel(row) {
      row.contractOe = { id: null }
      row.contractOe.id = row.contractOeId
      this.$confirm('确认删除此数据?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(row).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.handleSelect()
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 日志
    handleLog(row) {
      this.obj = row
      this.logDialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.logDialogVisible = false
    },
    // 点击树
    handleNodeClick(data) {
      if (data) {
        this.query.treeType = data.level
        this.query.treeId = data.id
        this.outletId = null // 清空
        if (data.level === 3) {
          this.outletId = data.id
        }
      }
      this.handleSelect()
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
